<template>
  <div class="app-container" v-loading="loading">
    <cfCard title='' class='page-container-search bottom12'>
      <div slot='content'>
        <el-form :model="searchParams" ref="searchParams" size="small" :inline="true" label-width="68px">
          <el-form-item label="任务名称" prop="jobName">
            <el-input v-model="searchParams.jobName" placeholder="请输入任务名称" clearable v-search="handleSearch" />
          </el-form-item>
          <el-form-item label="任务组名" prop="jobGroup">
            <el-select v-model="searchParams.jobGroup" placeholder="请选择任务组名" clearable @change="handleSearch">
              <el-option v-for="dict in sysJobGroup" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="执行状态" prop="status">
            <el-select v-model="searchParams.status" placeholder="请选择执行状态" clearable @change="handleSearch">
              <el-option v-for="dict in sysCommonStatus" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="执行时间">
            <el-date-picker
              v-model="searchParams.createTime"
              style="width: 220px;"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="handleSearch"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleSearch">查询</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </cfCard>
    <cfCard title='列表' hasTable :tableObj='tableDataObj' class='page_component-container-top'>
      <span slot="btn">
        <el-button type="danger" plain size="mini" @click="handleClean" v-hasPermi="['monitor:job:remove']" >清空</el-button>
        <el-button type="warning" plain size="mini" @click="handleExport" v-hasPermi="['monitor:job:export']" >导出</el-button>
      </span>
      <template slot='content'>
        <cfTable ref='cfTable' :tableDataObj='tableDataObj' :tableData='tableData' @handleSelectionChange="handleSelectionChange">
          <template slot='jobGroup'>
            <el-table-column label='任务组名' width='100px'>
              <dict-tag slot-scope="{row}" :options="sysJobGroup" :value="row.jobGroup"/>
            </el-table-column>
          </template>
          <template slot='status'>
            <el-table-column label='状 态' width='100px'>
              <el-switch slot-scope="{row}" v-model="row.status" active-value="0" inactive-value="1" @change="handleStatusChange(row)" ></el-switch>
            </el-table-column>
          </template>
          <template slot='createTime'>
            <el-table-column label='执行时间' width='140px'>
              <span slot-scope="{row}">{{ row.createTime }}</span>
            </el-table-column>
          </template>
          <template slot='operate'>
            <el-table-column label="操作" align="right" width="120" >
              <span slot-scope="{row}">
                <el-button size="mini" type="text" @click="handleView(row)" v-hasPermi="['monitor:job:query']" >详细</el-button>
                <el-button class="delete-span" type="text" size="mini" @click="handleDelete(row)" v-hasPermi="['monitor:job:remove']" >删除</el-button>
              </span>
            </el-table-column>
          </template>
        </cfTable>
        <pagination :total='queryParams.total' :page.sync='queryParams.pageNum' :limit.sync='queryParams.pageSize' @pagination='getListFn'/>
      </template>
    </cfCard>
    <logDetail v-if="dialogObj.visible" :dialogObj="dialogObj" @refresh="getListFn" />
  </div>
</template>

<script>
import { getJob} from "@/api/monitor/job";
import { listJobLog, delJobLog, cleanJobLog, exportJobLog } from "@/api/monitor/jobLog";
import logDetail from './logDetail';
export default {
  name: "JobLog",
  props: ['pageDialogObj'],
  components: {logDetail},
  data() {
    return {
      loading: true, /**遮罩层*/ 
      ids: [], /**选中数组*/ 
      tableData: [], /**调度日志表格数据*/ 
      searchParams: { /**查询参数*/ 
        jobName: undefined,
        jobGroup: undefined,
        status: undefined,
        createTime: []
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      tableDataObj: {  /**表格控件*/
        id: 'id', /**表格唯一标识*/
        showSelection: true, /**控制表格多选*/
        showIndex: true, /**控制表格序号*/
        defaultExpandAll: true, /**控制树结构表格是否默认全部展开*/
        treeProps: {children: 'children', hasChildren: 'hasChildren'}, /**树结构表格配置项*/
        option: [ /**表格列项配置*/
          {id: 1, label: '日志编号', prop: 'jobLogId', show: 1, needSlot: false},
          {id: 2, label: '任务名称', prop: 'jobName', show: 1, needSlot: false},
          {id: 3, label: '任务组名', prop: 'jobGroup', show: 1, needSlot: false},
          {id: 4, label: '调用目标字符串', prop: 'invokeTarget', minWidth: 150, show: 1, needSlot: false},
          {id: 5, label: '日志信息', prop: 'jobMessage', minWidth: 150, show: 1, needSlot: false},
          {id: 6, label: '执行状态', prop: 'status', show: 1, needSlot: true},
          {id: 7, label: '执行时间', prop: 'createTime', show: 1, needSlot: true},
        ]
      },
      dialogObj: {
        visible: false,
        title: '',
        width: '538px',
        appendToBody: true,
        params: {}
      }
    };
  },
  async created() {
    await this.getSysCommonStatus();
    await this.getSysJobGroup();
    const jobId = this.pageDialogObj.id;
    if (jobId !== undefined && jobId != 0) {
      const res = await getJob(jobId);
      if(res.code == 200) {
        this.searchParams.jobName = res.data.jobName;
        this.searchParams.jobGroup = res.data.jobGroup;
      }
      this.getListFn();
    } else {
      this.getListFn();
    }
  },
  methods: {
    async getListFn() { /** 查询调度日志列表 */
      this.loading = true;
      const data = {
        ...this.searchParams,
        ...this.queryParams
      }
      delete data.createTime;
      if(Array.isArray(this.searchParams.createTime) && this.searchParams.createTime.length) {
        data.params = {
          beginTime: this.searchParams.createTime[0],
          endTime: this.searchParams.createTime[1],
        }
      }
      const res = await listJobLog(data);
      if(res.code == 200) {
        this.tableData = res.rows;
        this.queryParams.total = res.total;
      }
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    handleSearch() {  /** 搜索按钮操作 */
      this.queryParams.pageNum = 1;
      this.queryParams.total = 0;
      this.tableData = [];
      this.getListFn();
    },
    handleReset() {  /** 重置按钮操作 */
      this.resetForm("searchParams");
      this.handleSearch();
    },
    handleSelectionChange(selection) { /**多选框选中数据*/ 
      this.ids = selection.map(item => item.jobLogId);
    },
    handleView(row) {  /** 详细按钮操作 */
      console.log(row);
      this.dialogObj.visible = true;
      this.dialogObj.title = '调度日志详情';
      this.dialogObj.params = row;
    },
    handleDelete(row) {  /** 删除按钮操作 */
      this.$confirm('是否确认删除调度日志编号为"' + row.jobLogId + '"的数据项？', '提示').then(async()=> {
        this.loading = true;
        const res = await delJobLog(row.jobLogId);
        if(res.code == 200) {
          this.msgSuccess("删除成功");
          this.handleSearch();
        }
        setTimeout(() => {
          this.loading = false;
        }, 500);
      }).catch(() => {});
    },
    handleClean() {  /** 清空按钮操作 */
      this.$confirm('是否确认清空所有调度日志数据项？', '提示').then(async()=> {
        this.loading = true;
        const res = await cleanJobLog();
        if(res.code == 200) {
          this.msgSuccess('清空成功');
          this.handleSearch();
        }
        setTimeout(() => {
          this.loading = false;
        }, 500);
      }).catch(() => {});
    },
    async handleExport() { /** 导出按钮操作 */
      this.loading = true;
      const res = await exportJobLog(this.searchParams);
      if(res.data && res.status == 200) {
        this.downloadFilesFn(res, `log_${this.formatDate()}.xlsx`);
      }
      setTimeout(() => {
        this.loading = false;
      }, 500);
    }
  }
};
</script>
